<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link href="css/index.css" rel="stylesheet"/>
    <style>
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
				z-index: 9999;
			}
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			.mui-popover {
				height: 200px;
				width: 130px;
			}
		</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav myHeader">
		<a id="menu" class="mui-action-menu mui-icon mui-icon-plusempty mui-pull-right" href="#topPopover" style="color: white;font-size: 30px;font-weight: bold;"></a>
	    <h1 class="mui-title myTitle" style="text-align: left;">微信</h1>
	</header>
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<!--数据列表-->
			<ul class="mui-table-view mui-table-view-chevron myContent">
				<li class="mui-table-view-cell mui-media" title="幸福">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/1.jpg">
						<div class="mui-media-body">
							幸福
							<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" title="木屋">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/2.jpg">
						<div class="mui-media-body">
							木屋
							<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" title="CBD">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/3.jpg">
						<div class="mui-media-body">
							CBD
							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" title="小王">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/4.jpg">
						<div class="mui-media-body">
							小王
							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" title="小张">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/5.jpg">
						<div class="mui-media-body">
							小张
							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" title="小李">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/6.jpg">
						<div class="mui-media-body">
							小李
							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" title="小赵">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/7.jpg">
						<div class="mui-media-body">
							小赵
							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#"><i class="mui-icon mui-icon-chatbubble"></i> 发起群聊</a>
						</li>
						<li class="mui-table-view-cell" id="add"><a href="#"><i class="mui-icon mui-icon-personadd"></i> 添加朋友</a>
						</li>
						<li class="mui-table-view-cell" id="barcode"><a href="#"><i class="mui-icon mui-icon-spinner mui-spin"></i> 扫一扫</a>
						</li>
						<li class="mui-table-view-cell"><a href="#"><i class="mui-icon mui-icon-checkmarkempty"></i> 收付款</a>
						</li>
					</ul>
				</div>
			</div>

		</div>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
    mui.init({
    pullRefresh : {
	    container:"#refreshContainer",
	    down : {
	      contentdown : "下拉可以刷新",
	      contentover : "释放立即刷新",
	      contentrefresh : "正在刷新...",
	      callback :pullfreshDown
	    },
	    up : {
	      contentrefresh : "正在加载...",
	      callback :pullfreshUp
	    }
	  }
    });
    var count = 0,urls;
    function pullfreshDown(){    	    	
    	urls = 'https://api.douban.com/v2/movie/top250?count=5&start=' + count;    	
    	mui.ajax({
    		url:urls,
    		type:'get',
    		dataType:'json',
    		success:function(data){  
    			for(var i=0;i<5;i++){
    				$('.myContent').prepend('<li class="mui-table-view-cell mui-media" title="'+data.subjects[i].title+'">'+
		        '<a href="javascript:;"><img class="mui-media-object mui-pull-left" src="'+data.subjects[i].images.small+'">'+
		           '<div class="mui-media-body">'+data.subjects[i].title+'<p class="mui-ellipsis">'+data.subjects[i].directors[0].name+'</p></div></a></li>')
    			}
    		} 
    	});
    	mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
    	count = count + 5;
    };
    function pullfreshUp(){
    	mui.ajax({
    		url:'https://api.douban.com/v2/movie/in_theaters?count=6&start=20',
    		type:'get',
    		dataType:'json',
    		success:function(res){
    			for(var i=0;i<5;i++){
    				$('.myContent').append('<li class="mui-table-view-cell mui-media" title="'+res.subjects[i].title+'">'+
		        '<a href="javascript:;"><img class="mui-media-object mui-pull-left" src="'+res.subjects[i].images.small+'">'+
		           '<div class="mui-media-body">'+res.subjects[i].title+'<p class="mui-ellipsis">'+res.subjects[i].directors[0].name+'</p></div></a></li>')    		
    			}
    		}
    	});
    	 this.endPullupToRefresh(true|false);
    };
    $('.myContent').on('tap','.mui-table-view-cell',function(){//切换到对话页
	  	      	 mui.openWindow({
	  	      	 	url:'subCharts.html',
	  	      	 	id:'subCharts.html',
	  	      	 	style:{},
	  	      	 	extras:{  
	  	      	 		title:this.getAttribute('title')
	  	      	 	},
	  	      	 	show:{
	  	      	 		autoShow:true,  
	  	      	 		aniShow:'slide-in-right',
	  	      	 		duration:100 
	  	      	 	}
	  	      	 })
	  	    });
	  	    $('#add').on('tap',function(){//添加朋友
	  	      	 mui.openWindow({
	  	      	 	url:'addFriend.html',
	  	      	 	id:'addFriend.html',
	  	      	 	style:{},
	  	      	 	show:{
	  	      	 		autoShow:true,  
	  	      	 		aniShow:'slide-in-right',
	  	      	 		duration:100 
	  	      	 	}
	  	      	 })
	  	    });
	  	    $('#barcode').on('tap',function(){//扫描二维码
	  	      	 mui.openWindow({
	  	      	 	url:'barcode.html',
	  	      	 	id:'barcode.html',
	  	      	 	style:{},
	  	      	 	show:{
	  	      	 		autoShow:true,  
	  	      	 		aniShow:'slide-in-right',
	  	      	 		duration:100 
	  	      	 	}
	  	      	 })
	  	    });
    </script>
</body>
</html>

